<template>
	<v-layout type="main">
		<WiseLisHead
			:getData="getData"
			:isCard="isCard"
			:showThisActive="showThisActive"
			:Pagedata="Pagedata"
			:searchChange="searchChange"
			@changeIsCard="changeIsCard"
			@changeSelect="changeSelect"
			:selectList="['我的数据集', '共享数据集']"
		/>

		<WiseLisCard v-if="isCard" :dataList="dataList" :goCode="goCode" :del="del" />

		<div class="table-layout" v-else>
			<el-table :data="dataList" class="myself-table">
				<el-table-column prop="name" label="名称">
					<template slot-scope="{ row }">
						<el-popover placement="right-start" width="320" trigger="hover">
							<row-data :row="row" />
							<el-button type="text" @click="goCode(row)" slot="reference">{{ row.name }}</el-button>
						</el-popover>
					</template>
				</el-table-column>
				<el-table-column prop="label" label="类别">
					<template slot-scope="{ row }">
						<span>{{ row.label }}</span>
					</template>
				</el-table-column>

				<el-table-column prop="desc" label="描述信息">
					<template slot-scope="{ row }">
						<el-popover placement="top" width="320" trigger="hover" :content="row.desc">
							<span class="desc" slot="reference">{{ row.desc }}</span>
						</el-popover>
					</template>
				</el-table-column>

				<el-table-column prop="update_time" label="更新时间" />
				<el-table-column label="操作">
					<template slot-scope="{ row }">
						<el-popover placement="top" width="80" trigger="click" v-model="row.visible">
							<p>您确定要删除吗？</p>
							<div style="text-align: right; margin: 0">
								<el-button size="mini" type="text" @click="row.visible = false">取消</el-button>
								<el-button type="primary" size="mini" @click="del(row.id)">确定</el-button>
							</div>
							<el-button type="text" slot="reference">删除</el-button>
						</el-popover>
					</template>
				</el-table-column>
			</el-table>
		</div>

		<div class="pagination-box">
			<el-pagination
				background
				class="pagination"
				layout="total, prev, pager, next, jumper"
				:page-size="Pagedata.pageSize"
				:current-page.sync="Pagedata.pageNum"
				@current-change="handleCurrentChange"
				:total="Pagedata.total"
			>
			</el-pagination>
		</div>
	</v-layout>
</template>

<script>
import { mapActions, mapState } from "vuex";
import { getDataSets, delDataSet } from "@/api/dataset";
import { labelTypeMaps } from "@/utils/maps";
import WiseLisHead from "@/components/module/wise-lis-head.vue";
import WiseLisCard from "@/components/module/wise-lis-card.vue";

export default {
	data() {
		return {
			Pagedata: {
				pageNum: 1,
				pageSize: 12,
				total: 0,
				name: "",
				visibility: 0, // 是否为公开项目
				eqLabels: null, //数据集类型
				order: "create_time", // 排序recommend、createTime、likeCount
			},
			labelTypeMaps,
			showThisActive: "0",
			dataList: [],
			testPic: require("@/assets/img/test-lis-pic.png"),
			isCard: true,
		};
	},
	mounted() {},
	async created() {
		this.Pagedata = { ...this.Pagedata, pageNum: this.pageNum, name: this.searchValue };
		this.getData();
	},
	destroyed() {},
	computed: mapState({
		pageNum: (state) => state.menuStore.pageData.pageNum,
		searchValue: (state) => state.menuStore.searchValue,
	}),
	methods: {
		...mapActions(["updatePageNum", "updateSearch"]),
		async getData() {
			let res = await getDataSets({ ...this.Pagedata, visibility: this.showThisActive });
			if (res && res.data) {
				let ret = res.data;
				console.log("ret", ret);
				this.dataList = ret.list;
				this.Pagedata.total = ret.total;
			}
		},
		searchChange(value) {
			this.updatePageNum(1);
			this.Pagedata.pageNum = 1;
			this.Pagedata.name = value;
			this.updateSearch(value);
			this.getData();
		},
		async del(id) {
			console.log(id, "id");
			// let res = await this.$isDel();
			// if (res) {
			await delDataSet({ id });
			this.getData();
			// }
		},
		changeIsCard(val) {
			this.isCard = val;
		},
		changeSelect(val) {
			this.showThisActive = val;
			this.getData();
		},
		handleCurrentChange(val) {
			this.Pagedata.pageNum = val;
			this.updatePageNum(val);
			this.getData();
		},
		goCode({ id }) {
			let query = { id };
			this.$router.push({
				path: "/dataset/code",
				query,
			});
		},
	},
	components: { WiseLisHead, WiseLisCard },
};
</script>

<style lang="less" scoped></style>
